Create Letterpress effect and web download button with PSD

Today’s post will be two Photoshop tutorials, the first one will be the famous letterpress effect and the second one will be web download button. I made these two tutorials in one post to give the readers a quick way to learn the two types of effects at the same time. Let’s jump in to the tutorial.
Please note :

In our blog we have a open giveaway for each month apart from special giveaway, the 2 top commentators win ad slots in our blog and each month it reset and select the winner, so participate it and anyhow it’s a do follow blog and you’ll get back links also

top Create Letterpress effect and web download button with PSD

Tutorial #1 :Letterpress effect

Step :1
Create a document size for your need, here i created 580px width X 300px height and choose bright colour for background.
its better to create layers and do your works, which really helps in editing the each layers later.
Short cut key : Ctrl+Shift+N or click “Create a new layer “ from the layer palette.
Step:2
Select the text tool from the toolbox menu ‘ T ‘ and type DOWNLOAD – choose Bold Text, i used November text : see the output.

step-2 type the text now

Step :3 Add the layer style effect now:

Innershadow

step3- add innnershadow

(II) Coloroverlay

step3- coloroverlay

and decrease the blending option to Flow to 0% to 30% and enter.
Output : the color-overlay can be changed according to your needy.

final output of letterpress effect

Tutorial #2 : create Web Download button

Step : 1
Create the document and choose black color as your background,

1) Create a new layer -> Ctrl+Shift+N
2) Select the rectangle marquee tool (M)
3) Fill it with your color(color doesn’t matter)

Step:2
Add the layer style effect to the rectangle
Inner Glow :

innerglow effect

gradient overlay: value #0d96db to #87dcff

add Gradient overlay

Stroke: gradient value : #068acc to #34b2f1

2 sroke Create Letterpress effect and web download button with PSD

add the stroke value

optional : add drop-shadow effect – default value. And inner shadow value if you need, but it wont show you much difference. I didn’t use here.

final 2tutorial Create Letterpress effect and web download button with PSD

step : 3
Now you can add the normal text “DOWNLOAD “ OR the previous letterpress text effect. Arrange the size of the text effect and text font. Here is the final output of this tutorial.

final Create Letterpress effect and web download button with PSD

One Golden rule: In “Photoshop “play with the layer styles and blending option. You can create many good designs.
Hope you like this tutorial, need suggestion-anything if you don’t like it, Hit it on the comment section.

Download PSD

Buy 1 Get 1 50% OffCoupon

Buy 1 Get 1 50% Off

AD START DATE - JAN 1, 2024 00:00:00 (EST)

AD EXPIRATION DATE - FEB 1, 2024 00:00:00 (EST)

Ad Code: HTML:

https://www.popilush.com/collections/bundle-and-save

33 Comments

Richie on 04/02/2010 at 22:11

Very simple and easy tutorial to achieve the letter press effect. Good for beginners.
.-= Richie´s latest blog ..25+ beautiful examples of hand drawn elements in web design =-.
- Sri Ganesh.M on 10/02/2010 at 18:10
  
  thanks RICHIE , yes it helped for my offline friends also.
Shurandy Thode on 04/02/2010 at 22:17

I agree with Richie. Simple yet useful great article Sri. 🙂
.-= Shurandy Thode´s latest blog ..Quick, fancy, dirty yet useful hover menu using jQuery hoverIntent =-.
- Sri Ganesh.M on 10/02/2010 at 18:11
  
  thanks Thode i hope you both like it
Omar on 04/02/2010 at 22:24

Great job! simple but effective 🙂
- Sri Ganesh.M on 10/02/2010 at 18:16
  
  thanks omar
sudharsan @ technoskillonline on 05/02/2010 at 13:44

Nice tutor..
thanks for sharing
- Sri Ganesh.M on 10/02/2010 at 18:32
  
  thanks sudharsan
Arun Basil Lal on 06/02/2010 at 19:53

Download buttons look elegant, thanks for sharing the PSD, most people never do that 😉
.-= Arun Basil Lal´s latest blog ..Bandwidth Monitoring Tool for Windows Vista and Seven =-.
- Sri Ganesh.M on 11/02/2010 at 18:46
  
  thanks for you kind words, top bloggers give 🙂 source files 😉
vikas ghodke on 06/02/2010 at 22:56

Simple and nice.
- Sri Ganesh.M on 11/02/2010 at 18:53
  
  thanks vikas
Joseph on 07/02/2010 at 08:12

Here have 22 different buttons with psd files i fav, sharing with guys : )
http://button-download.com/
.-= Joseph´s latest blog ..Free Apple iPad Icon Set =-.
- Sri Ganesh.M on 11/02/2010 at 19:32
  
  if you need to promote , submit in the user-link feed.
Mohamed Rias | smashingtips.com on 07/02/2010 at 09:18

awesome dude.. thanks for sharing 🙂
.-= Mohamed Rias | smashingtips.com´s latest blog ..20+ incredible Gigapixel Photography Inspirations =-.
- Sri Ganesh.M on 11/02/2010 at 19:33
  
  thanks Rias, and your giga pixel is good
Sunil Jain on 07/02/2010 at 16:53

I liked it dude 🙂 :), but why have you written if you don’t like it then hit the comment section ??? 😉 😉
.-= Sunil Jain´s latest blog ..Hi everyone 🙂 🙂 After long time 🙂 🙂 =-.
- Sri Ganesh.M on 11/02/2010 at 19:34
  
  the commentators are the real judge and need their feedback to improve my skills, thats y !
gautam hans on 07/02/2010 at 23:40

Great tutorial. I mess a lot with photoshop, but never get it right, but thanks for giving such a good tutorial
.-= gautam hans´s latest blog ..Do you Follow a Blog Posting Workflow? =-.
- Sri Ganesh.M on 11/02/2010 at 19:37
  
  thanks hans ! love to hear this from you !
Anish K.S on 08/02/2010 at 06:35

Simple, will try this.
.-= Anish K.S´s latest blog ..Apple iTunes 9.0.3 Released – Download/Upgrade =-.
- Sri Ganesh.M on 11/02/2010 at 19:55
  
  thanks anish and welcome back
S.Pradeep Kumar on 10/02/2010 at 18:02

Really simple and useful tutorial Ganesh. Thanks for sharing the PSDs. 🙂
.-= S.Pradeep Kumar´s latest blog ..15+ Tips To Optimize Images For Search Engines =-.
- Sri Ganesh.M on 11/02/2010 at 19:56
  
  thanks sam i hope you like it
Sri Ganesh.M on 11/02/2010 at 19:57

for pro it may be but for the beginners it sure work and mainly for tech bloggers !! and welcome to AnimHuT
Chris Thurman on 17/02/2010 at 22:01

Thanks for making it simple and easy!
.-= Chris Thurman´s latest blog ..How to Build Web Cred as a Designer =-.
- Sri Ganesh.M on 22/02/2010 at 19:08
  
  thanks Chris. it really helps for my tech readers and other new designers 🙂
Kushal Chap on 21/02/2010 at 12:27

Cool idea. Will definetly try this.
Sri Ganesh.M on 22/02/2010 at 19:06

thanks and happy it comes good !!
Sri Ganesh.M on 22/02/2010 at 19:09

thanks pliggs,
jared thompson on 03/03/2010 at 19:51

such a simple to follow tutorial, i hope to carry this out later 😀
Inzone Internet on 18/04/2010 at 11:29

Cool tips sri, I’m just learning so I want as much tips as I can.
.-= Inzone Internet´s latest blog ..Ask Me a SEO or Blogging Question! =-.
Ari Arsyadi on 11/09/2010 at 19:36

I think both tutorials are the foundation to most high quality buttons we see on the internet. Nicely put and easy to follow. Thanks.

Trackbacks/Pingbacks

uberVU - social comments - Social comments and analytics for this post... This post was mentioned on Twitter by animhut: RT @animhut Create Letterpress effect…